<template>
	<view class="ai">
		<headerinfo></headerinfo>

		<view class="texttopic">
			<view class="left">

				<view class="label" style="margin-top: 0;">
					原图 <i style="color: red;">*</i>
				</view>
				
				<el-upload class="avatar-uploader" ref="uploadImg" multiple :auto-upload="false" :show-file-list="true"
					:on-progress="handlePreview">
					<el-button size="small" type="primary" style="margin-bottom: 20px;">上传图片</el-button>
				</el-upload>
				
				<view class="label">
					音乐背景 <i style="color: red;">*</i>
				</view>
				<el-radio-group v-model="form.music" size="small">
					<el-radio v-for="(item,index) in MusicStyle" :key="index" :label="item.name"
						border>
						<audio :src="item.netUrl" controls loop ></audio>
						</el-radio>
				</el-radio-group>
				
				<view class="label" style="margin-top: 0;">
					转场效果
				</view>
				
				 <el-select :multiple="true" v-model="form.transitionEffects" filterable placeholder="请选择">
				    <el-option
				      v-for="item in transitionEffectslist"
				      :key="item.id"
				      :label="item.name"
				      :value="item.id">
				    </el-option>
				  </el-select>
				
				<!-- 
				<el-image v-show="form.imageUrl1" style="width: 100%; height: auto" ref="preview" :src="form.imageUrl1"
					:preview-src-list="[form.imageUrl1]"></el-image> -->

				<view class="btns">

					<!-- <view class="btn" style="margin-right: 30px;" @click="seeHis">
						查看绘画历史
					</view> -->

					<view class="btn" @click="submit">
						提交
					</view>
				</view>
			</view>


			<view class="right">
				<view class="label">
					视频生成任务
				</view>

				<view class="listBox">

					<view class="list" >
						<view class="tag" v-if="img">
							<span>
								已完成
							</span>
							<span>
								<i class="iconfont" @click="del()">&#xe718;</i>
								<i class="iconfont" @click="xiazai()">&#xe804;</i>
							</span>
						</view>
						
						<video :src="videourl" style="width: 100%; height: auto"></video>
					</view>

				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import headerinfo from '@/components/headerinfo'
	import minxins from '../../common/upload.js';
	export default {
		mixins: [minxins],
		components: {
			headerinfo
		},
		data() {
			return {
				form: {
					appId: '',
					async: true,
					businessName: '',
					images:[],
					music: '',
					transitionEffects:[],
					userId: '',
					username: '',
					workflowId: '',
				},
				img: '',
				timer: null,
				taskId: '',
				MusicStyle:[],
				transitionEffectslist:[],
				videourl:''
			};
		},
		onLoad(e) {
			if (e.workflowId) {
				this.form.workflowId = e.workflowId
			}
			this.getData()
		},
		methods: {
			getData() {
				this.$api2.ffgetMusicStyle().then(res => {
					console.log(res)
					this.MusicStyle = res
				})
				
				this.$api2.getImageTranStyle().then(res => {
					console.log(res)
					this.transitionEffectslist = res
				})
				
			},
			handlePreview(file) {
				// console.log(file)
				// const tempFilePaths = URL.createObjectURL(file.raw);
				
			},
			seeHis() {
				this.showList = !this.showList
				this.getData2()
			},
			getData2() {
				let query = {
					taskType: 'COZE_IMAGE'
				}
				this.$api2.ffgetTaskResult(query).then(res => {
					console.log(res)
					this.imglist = res
				})
			},
			submit() {
				this.form.images = []
				if(this.$refs.uploadImg.uploadFiles.length>0){
					
					for (let i = 0; i < this.$refs.uploadImg.uploadFiles.length; i++) {
						this.$refs.uploadImg.uploadFiles[i]
						
						var fileName = Date.now() + '_' + Math.round(Math.random() *
							100000000) + '.' + this.$refs.uploadImg.uploadFiles[i].name + '.png'
									
									
						var familyId = uni.getStorageSync('familyId') ? uni
							.getStorageSync('familyId')[0] : ''
								
						this.uploadUserImage(URL.createObjectURL(this.$refs.uploadImg.uploadFiles[i].raw)	, 'image', fileName, familyId, (
							imgUrl) => {
								this.form.images.push(imgUrl)
						})
					}
				}
				 
				
				console.log('dkqowikdoqwkdokqwod')
				console.log(this.form.images)
				
				setTimeout(()=>{
					if (this.form.images.length == 0) {
						return this.$message.warning('请上传图片')
					}
					
					if (this.form.music == '') {
						return this.$message.warning('请选择背景音乐')
					}
					
					
					uni.showLoading({
						title: '加载中...'
					})
					this.$api2.ffsubmitImages2videoRequest(this.form).then(res => {
						console.log(res.taskId)
					
						this.taskId = res
					
						this.timer = setInterval(() => {
							uni.showLoading({
								title: '加载中...'
							})
							this.$api2.ffgetTaskResult({
								taskId: res
							}).then(res2 => {
								console.log(res2)
								let checkedStatus = res2[0].checkedStatus
								let overdata = res2[0]
								if (checkedStatus == 'SUCCESS' || checkedStatus == 'FAILED') {
									this.clearInterval()
					
									console.log(overdata)
									this.videourl = overdata.checkedResult.data
									uni.hideLoading()
								}
							})
						}, 3000)
					})
				},500)
				
				

			},
			clearInterval() {
				if (this.timer) {
					clearInterval(this.timer)
					this.timer = null
					console.log('定时器已清除')
				}
			},
			del() {
				this.$confirm('确认删除, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let query = {
						taskIds: [this.taskId]
					}
					this.$api2.ffdeleteTaskResult(query).then(res => {
						this.$message.success('删除成功')

						this.img = ''
					})
				})
			},
			fangda() {
				this.$refs.preview.clickHandler();
			},
			async xiazai(item) {

				var imgUrl = this.videourl

				
				const response = await fetch(imgUrl)
				const blob = await response.blob()
				// 创建下载链接
				const url = window.URL.createObjectURL(blob)
				const link = document.createElement('a')
				link.href = url
				link.download = 'image.png'
				document.body.appendChild(link)
				link.click()
				document.body.removeChild(link)
				// 释放 Blob URL
				window.URL.revokeObjectURL(url)
			},

		}
	};
</script>


<style lang="scss" scoped>
	.texttopic {
		padding: 40rpx;
		display: flex;

		.left {
			width: 450px;
			min-width: 450px;
			padding: 30rpx;
			box-shadow: 0 0 3px #ccc;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			margin-right: 40px;

			.label {
				margin-bottom: 20rpx;
				font-size: 28rpx;
				margin-top: 40rpx;
			}

			.btn {
				width: 100%;
				height: 100rpx;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				border-radius: 20rpx;
				margin-top: 20rpx;
				background-color: #f76767;
				cursor: pointer;
			}
		}

		.right {
			width: 100%;
			box-shadow: 0 0 3px #ccc;
			border-radius: 20rpx;
			padding: 30rpx;

			.label {
				border-bottom: 1px solid #e6e6e6;
				padding-bottom: 30rpx;
				margin-bottom: 30rpx;
			}

			.listBox {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				height: 80vh;
				overflow-y: scroll;

				.list {
					width: 100%;
					box-shadow: 0 0 3px #ccc;
					border-radius: 20rpx;
					margin-bottom: 30rpx;
					padding: 20rpx;

					.tag {
						font-size: 30rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						cursor: pointer;
						margin-bottom: 20rpx;
					}

					.iconfont {
						margin-left: 20px;
						font-size: 24px;
					}

					image {
						width: 100%;
						border-radius: 20rpx;
					}
				}
			}
		}
	}

	::v-deep .el-radio {
		margin-right: 15rpx;
		margin-bottom: 25rpx;
	}

	.btns {
		display: flex;
		justify-content: space-between;
	}
	
	/deep/ .uni-audio-default{
		min-width: 50px;
	}
	
	/deep/ .el-radio.is-bordered{
		height: auto;
	}
	
	/deep/ .el-radio__input{
		position: absolute;
		left: 5px;
		top: 50%;
		transform: translateY(-50%);
	}
	
	/deep/ .el-radio--small.is-bordered{
		padding-left: 20px;
		padding-bottom: 10px;
	}
	
	/deep/ .uni-audio-right{
		display: none;
	}
</style>